
import React, { Component } from "react";
import type { ReactNode } from 'react'
import axios from 'axios'
import './app.css'

//    axios.get('http://121.89.205.189:3000/api/pro/list')

//  数据列表
interface iproducts{
    banners: string[]
    proid:string
    brand:string
    category: string
    proname:string
    originprice:number
    sales:number
    stock:number
    desc:string
    issale:number
    isrecommend:number
    discount:number
    isseckill:number
    img1:string
    img2:string
    img3:string
    img4:string
}

// 底部导航
interface ifooter{
    img:string
    name:string
}
// 导航接口
interface inav{
    list:ifooter[]
}


class Header extends Component { 
    constructor(props: any) {
        super(props);
    }
    render(): ReactNode {
        return <>
            <h1 className="header">首页</h1>
        </>
    }
}

class BodyContext extends Component { 
    render(): ReactNode {
        return <>
        <main>
            
        </main>
        </>
    }
}



class Footer extends Component{

    state:inav={
        list:[
            {
                img:'/0704hw/home.png',
                name:'首页'
            },
            {
                img:'/0704hw/分类.png',
                name:'分类'
            },
            {
                img:'/0704hw/购物车.png',
                name:'购物车'
            },
            {
                img:'/0704hw/我的.png',
                name:'我的'
            }
        ]
    }
    render(): ReactNode {
        return <>
        <footer>
            {this.state.list.map((item,index)=>{ 
                return <div key={index}>
                    <img src={item.img} alt="加载中..."/>
                    <div>{item.name}</div>
                </div>
            })}
        </footer>
        </>
    }
}





export default class App extends Component{
    render() {
        return <>
            <div>
                <Header />
                <BodyContext />
                <Footer />
            </div>
        </>
    }

}